import React, { useCallback, useEffect, useState } from "react";
import { Form, Button, Input, Select, Tooltip, Space, DatePicker, message, Popconfirm, Image } from "antd";
import BatchSuffixInput from "@/views/components/BatchSuffixInput";
import BtnGroup from "@/views/components/BtnGroup";
import RangeDisablePicker from "@/views/components/RangeDisablePicker";
import ActionSelect from "@/views/components/ActionSelect";
import SkuSpuClick from "@/views/components/SkuSpuClick";
import { DownOutlined, ShoppingFilled, TagFilled } from "@ant-design/icons";

import { GOODS_ACTION_TYPE } from "@/views/utils/constant";
export default ({ logType }) => {
	const [tabValue, setTabValue] = useState("sku");
	const [actionhouse, setActionhouse] = useState(null);
	const defaultColumns = [
		{
			tabs: ["spu", "sku"],
			hidden: true,
			// 按款式/按SKU：点击后，所有当前页面的查询条件、列表数据切换至SPU/SKU维度展示。
			search: {
				order: 1,
				span: 3,
				content: () => {
					return (
						<BtnGroup
							value={tabValue}
							onChange={value => {
								setTabValue(value);
							}}
							options={[
								{
									label: "按款式",
									value: "spu",
									icon: <ShoppingFilled className="mr4" />
								},
								{
									label: "SKU",
									value: "sku",
									icon: <TagFilled className="mr4" />
								}
							]}
						/>
					);
				}
			}
		},
		{
			tabs: ["sku"],
			name: "商品编码",
			code: "skuCode",
			search: {
				order: 1,
				span: 2.5,
				content: () => (
					<BatchSuffixInput
						autoMultiLine
						allowClear
						clearable
						modalProps={{ title: "请输入商品编码" }}
						placeholder="多个商品编码，以逗号隔开"
						message="多个商品编码，以逗号分隔或每行一个商品编码"
					/>
				)
			}
		},
		{
			tabs: ["spu"],
			name: "款式编码",
			code: "spuCode",
			search: {
				order: 1,
				span: 2.5,
				content: () => <Input placeholder="请输入款式编码"></Input>
			}
		},
		{ tabs: ["sku", "spu"], name: "操作内容", code: "operContent", with: 300 },
		{
			tabs: ["sku", "spu"],
			name: "操作",
			code: "operType",
			render: value => (
				<span>
					{GOODS_ACTION_TYPE.map(item => {
						if (item.value == value) {
							return <span>{item.label}</span>;
						}
					})}
				</span>
			)
		},

		{
			tabs: ["sku", "spu"],
			name: "操作人",
			code: "operatorName",
			search: {
				order: 2,
				span: 2.5,

				code: "operatorId",
				content: () => {
					return <ActionSelect value={actionhouse} onChange={handleActionChange} />;
				}
			}
		},

		{
			tabs: ["sku", "spu"],
			name: "操作时间",
			code: "operTime",
			search: {
				order: 3,
				span: 5,
				keys: ["startTime", "endTime"],
				content: () => <RangeDisablePicker showTime diff="6 months" />
			}
		}
	];

	const handleActionChange = value => {
		setActionhouse(value);
	};
	const getColumns = useCallback(
		t => {
			return defaultColumns.filter(e => e.tabs.includes(t));
		},
		[tabValue]
	);
	const [columns1, setColumns] = useState(getColumns("sku"));
	const [isLogSkuType, setIsLogSkuType] = useState(true);
	useEffect(() => {
		setIsLogSkuType(tabValue === "sku");
		setColumns(getColumns(tabValue));
	}, [tabValue]);

	return { isLogSkuType, tabValue, setTabValue, columns1, defaultColumns, setColumns };
};
